<template>
	<el-dropdown class="avatar-container" trigger="hover">
		<div class="avatar-wrapper">
			<el-avatar shape="circle" :size="30" :src="user.avatar"></el-avatar>
			<span>{{ user.userName }}</span>
			<el-icon class="el-icon--right">
        <ArrowDown />
      </el-icon>
		</div>
		<template #dropdown>
			<el-dropdown-menu class="user-dropdown">
				<el-dropdown-item @click="logout"> {{ $t('app.signOut') }} </el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';

const userStore = useStore.userStore();
const { user }: any = storeToRefs(userStore);

const router = useRouter();
const localePath = useLocalePath();

const logout = () => {
	userStore.logoutAction();
	router.push(localePath('/login'));
};
</script>

<style lang="less" scoped>
.avatar-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--theme-header-height);
	.avatar-wrapper {
		display: flex;
		align-items: center;
		white-space: nowrap;
		cursor: pointer;
		padding: 0 8px;
		color: var(--theme-header-text-color);
		span {
			margin-left: 6px;
		}
	}
	&:hover {
		background: var(--theme-header-hover-color);
	}
}
</style>
